<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head >
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.7/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.7/dist/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin" >
    <!-- 页面头部 -->
    <div th:insert="~{front/header :: #header}"></div>

    <div class="layui-main " style="margin-top: 70px">
        <div style="margin-left: 20%">
            <fieldset class="layui-elem-field layui-field-title" style="">
                <legend>
                    <h2> 客官你想吃点啥 </h2>
                </legend>
            </fieldset>
        </div>

        <div class="layui-fluid">
            <!-- 字段区块 -->
            <div class="layui-col-md-offset2 layui-col-md3 " style="width: 350px;height: 400px" th:each="food:${foods}"  >
                <fieldset class="layui-elem-field layui-field-title">
                    <legend><span th:text="${food.name}"></span></legend>
                    <img th:src="${food.img}" alt="" th:value="${food.id}" onclick="apply(this)" width="310px" height="210px" />
                    <p> 价格: &nbsp;<span th:text="${food.price}"></span> 元</p>
<!--                    <div class="layui-field-box" >-->
<!--                        <span> 描述 </span> <p th:text="${animal.message}"></p>-->
<!--                    </div>-->
                    <a style="margin-left: 5px" th:value="${food.id}" onclick="apply(this)">
                        <i class="layui-icon layui-icon-heart-fill" style="color: #ff0000">&nbsp;加入购物车</i>
                    </a>
                </fieldset>
            </div>
        </div>



    </div>


</div>

<script>

        let $ = layui.jquery;

        function apply(data) {
            let id = data.getAttribute("value");
            console.log("fid-->" + id);
            layer.confirm('是否加入购物车', {
                icon: 6,
                title: '提示'
            }, function (index) {
                layer.close(index);

                $.ajax({
                    url: '/check/isLogin',
                    type: 'get',
                    success: function (result) {
                        console.log(result);
                        if (parseInt(result.code) === 200) {
                            layer.open({
                                type: 2,
                                title: '加入购物车',
                                shade: 0.1,
                                area: ['900px', '800px'],
                                content: '/front/addCart/' + id
                            });
                        } else {
                            layer.msg('请先登录用户', {icon: 2, time: 500});
                        }
                    }
                })

            })
        };


        function updatePassword() {
            layer.open({
                type: 2,
                title: '修改密码',
                shade: 0.1,
                area: ['600px', '450px'],
                content: '/user/updatePassword'
            });
        }

</script>


</body>
</html>